<script>
import { useRouter } from "vue-router";
import { useIndex } from "../stores/index.js";
import { Toast } from "vant";
import { onBeforeMount, reactive, ref, computed } from "vue";
export default {
  setup() {
    const indexStore = useIndex();
    indexStore.changeSideLeftMeShow(false);

    const router = useRouter();
    //++++++++++++++++++++++++
    // let one = 1; //阅读判断条件
    // let two = 2; //时间判断条件
    // let three = 3; //评论判断条件
    // let four = 4; //收藏判断条件
    // let five = 5; //打赏判断条件
    // //++++++++++++++++++++++++

    // 连续签到天数
    let signday = ref(0);
    //页面跳转
    let back = () => {
      router.back();
      // router.push("/BookStore");
    };
    //总积分
    let allintegral = ref(0);
    //金币
    let gold = ref(0);
    //总日期
    // let dates = ["01/01","01/02","01/03","01/04","01/05","01/05"]
    let dates = reactive({
      dayslists: [
        {
          days: "01/01",
          flag: false,
        },
        {
          days: "01/02",
          flag: false,
        },
        {
          days: "01/03",
          flag: false,
        },
        {
          days: "01/04",
          flag: false,
        },
        {
          days: "01/05",
          flag: false,
        },
        {
          days: "01/06",
          flag: false,
        },
      ],
      one: "0/1",
      two: "0/1",
      three: "0/1",
      four: "0/1",
      five: "0/1",
    });

    //获取当前点击对象的下标，然后

    //签到领积分
    let oksign = ref(null);
    //如果我点了签到，就把这个对象的false改为true控制钩子

    let ceshi = ref(false);
    // //签到
    let sign = (index) => {
      //收到下标
      signday.value += 1;
      ceshi.value = true;
      allintegral.value += 200;
      // console.log(index)
      dates[index].falg = true;
      if (dates[index].falg == true) {
        console.log(dates[index].flag, index); //输出当前点击日期对象
      } else {
        console.log("错了");
      }
    };
    //如果本地里面有积分，就拿本地里面得积分，如果没有，就让他等于0
    // if(){

    // }

    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // 阅读一本书得积分
    let readbook = ref(false);
    let clickone = () => {
      if (dates.one == "1/1") {
        //判断条件
        if (dates.one == "1/1" && readbook.value == false) {
          //没领过才可以进来
          readbook.value = true; //状态为真表示已经领取
          allintegral.value += 20; //积分+10
          localStorage.setItem("allintegral", allintegral.value); //加完放到本地存储
          let userinfo = JSON.parse(localStorage.getItem("userinfo")); //取值
          userinfo.one = true; //加对象
          localStorage.setItem("userinfo", JSON.stringify(userinfo)); //把对象放回本地存储
          Toast("领取成功");
          return;
        }
        Toast("您已经领取过啦！");
      } else {
        Toast("领取不了");
      }
    };

    //阅读时间超30分钟得积分
    let readtime = ref(false);
    let clicktwo = () => {
      if (dates.two == "1/1") {
        //判断条件
        if (dates.two == "1/1" && readtime.value == false) {
          //没领过才可以进来
          readtime.value = true; //状态为真表示已经领取
          allintegral.value += 20; //积分+10
          localStorage.setItem("allintegral", allintegral.value); //加完放到本地存储
          let userinfo = JSON.parse(localStorage.getItem("userinfo")); //取值
          userinfo.two = true; //加对象
          localStorage.setItem("userinfo", JSON.stringify(userinfo)); //把对象放回本地存储
          Toast("领取成功");
          return;
        }
        Toast("您已经领取过啦！");
      } else {
        Toast("领取不了");
      }
    };

    //发表评论得积分
    let write = ref(false);
    let clickthree = () => {
      if (dates.three == "1/1") {
        //判断条件
        if (dates.three == "1/1" && write.value == false) {
          //没领过才可以进来
          write.value = true; //状态为真表示已经领取
          allintegral.value += 20; //积分+10
          localStorage.setItem("allintegral", allintegral.value); //加完放到本地存储
          let userinfo = JSON.parse(localStorage.getItem("userinfo")); //取值
          userinfo.three = true; //加对象
          localStorage.setItem("userinfo", JSON.stringify(userinfo)); //把对象放回本地存储
          Toast("领取成功");
          return;
        }
        Toast("您已经领取过啦！");
      } else {
        Toast("领取不了");
      }
    };

    //收藏作品得积分
    let likebook = ref(false);
    let clickfour = () => {
      if (dates.four == "1/1") {
        //判断条件
        if (dates.four == "1/1" && likebook.value == false) {
          //没领过才可以进来
          likebook.value = true; //状态为真表示已经领取
          allintegral.value += 20; //积分+10
          localStorage.setItem("allintegral", allintegral.value); //加完放到本地存储
          let userinfo = JSON.parse(localStorage.getItem("userinfo")); //取值
          userinfo.four = true; //加对象
          localStorage.setItem("userinfo", JSON.stringify(userinfo)); //把对象放回本地存储
          Toast("领取成功");
          return;
        }
        Toast("您已经领取过啦！");
      } else {
        Toast("领取不了");
      }
    };

    //打赏作品的积分
    let givegift = ref(false);
    let clickfive = () => {
      if (dates.five == "1/1") {
        //判断条件
        if (dates.five == "1/1" && givegift.value == false) {
          //没领过才可以进来
          givegift.value = true; //状态为真表示已经领取
          allintegral.value += 20; //积分+10
          localStorage.setItem("allintegral", allintegral.value); //加完放到本地存储
          let userinfo = JSON.parse(localStorage.getItem("userinfo")); //取值
          userinfo.five = true; //加对象
          localStorage.setItem("userinfo", JSON.stringify(userinfo)); //把对象放回本地存储
          Toast("领取成功");
          return;
        }
        Toast("您已经领取过啦！");
      } else {
        Toast("领取不了");
      }
    };
    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //挂载前

    onBeforeMount(() => {
      let Read = JSON.parse(window.localStorage.getItem("Read"));
      dates.one = Read.one;
      dates.two = Read.two;
      dates.three = Read.three;
      dates.four = Read.four;
      dates.five = Read.five;
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (userinfo.one) {
        //第一个任务
        readbook.value = userinfo.one;
      }

      if (userinfo.two) {
        //第二个任务
        readtime.value = userinfo.two;
      }

      if (userinfo.three) {
        //第三个任务
        write.value = userinfo.three;
      }

      if (userinfo.four) {
        //第四个任务
        likebook.value = userinfo.four;
      }

      if (userinfo.five) {
        //第五个任务
        givegift.value = userinfo.four;
      }

      //如果本地存储没有天数和积分，就让他等于0，如果有就让他等于本地存储里面得数据
      let dayslists = JSON.parse(localStorage.getItem("dayslists")); //取遍历的日历数组对象
      let allint = JSON.parse(localStorage.getItem("allintegral")); //取总积分
      let howmanydays = JSON.parse(localStorage.getItem("howmanydays")); //取连续签到天数
      let golds = JSON.parse(localStorage.getItem("gold"));
      console.log(gold);
      // console.log(dayslists)
      // console.log(allint)
      // console.log(howmanydays)
      if (allint) {
        //如果取到了积分就把代码里的积分变成取得的积分
        allintegral.value = allint;
      }
      if (howmanydays) {
        //如果取到了签到天数就把代码里的签到天数变成取得的签到天数
        signday.value = howmanydays;
      }
      if (dayslists) {
        //如果取到了遍历要用的数组对象就把代码里的遍历要用的数组对象变成取得的遍历要用的数组对象
        dates.dayslists = dayslists;
      }
      if (golds) {
        gold.value = golds;
      }
    });
    //点击签到
    let time = ref(0);
    let addint = (index) => {
      if (time.value == 0) {
        time.value = new Date().getTime();
      }
      console.log(1, time.value);
      let newTime = new Date().getTime();
      console.log(newTime - time.value);
      if (newTime - time.value >= index * 30000) {
        console.log("进来了");
        dates.dayslists[index].flag = !dates.dayslists[index].flag;
        allintegral.value += 200; //积分增加
        signday.value += 1; //点击天数加一
        localStorage.setItem("allintegral", allintegral.value); //把总积分放进本地存储
        localStorage.setItem("howmanydays", signday.value); //把签到天数放到本地存储
        localStorage.setItem("dayslists", JSON.stringify(dates.dayslists)); //把遍历的带flag的对象放到本地存储
      } else {
        Toast("今天已经签过啦！明天再来吧~");
      }
    };
    //显示兑换框吗？
    let show = ref(false);
    let changeshow = () => {
      show.value = !show.value;
      console.log("changeshow");
    };
    //积分转金币
    let howmany = ref(""); //输入框输入的东西
    let gethowmany = ref(""); //转换的东西
    //开始转换
    let change = (_howmany) => {
      gethowmany.value = _howmany;
      gethowmany.value = parseInt(gethowmany.value) / 10;
      // console.log(_howmany);
      if (_howmany > allintegral.value) {
        Toast("最多不可超过现有狐币");
        gethowmany.value = allintegral.value;
        howmany.value = allintegral.value;
      }
      // howmany = parseInt(howmany);
      if (!/^\d{1,}$/.test(_howmany)) {
        gethowmany.value = 0;
        // Toast("请在左边输入数字");
      }
    };
    //十比一兑换
    //确认成功
    let sure = () => {
      if (allintegral.value - howmany.value < 0) {
        Toast("无法继续兑换，积分余额不足");
        return;
      }
      if (allintegral.value <= 0) {
        Toast("无法继续兑换，积分余额不足");
        return;
      }
      allintegral.value = allintegral.value - howmany.value; //扣除积分
      localStorage.setItem("allintegral", allintegral.value);
      // Toast("剩余积分",allintegral.value,"剩余金币",gold.value)
      // console.log("转换成功",gethowmany)
      console.log("剩余积分:", allintegral.value);

      console.log(gethowmany.value);
      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
      if (userinfo.foxBean) {
        userinfo.foxBean += gethowmany.value;
        window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
      } else {
        console.log(gethowmany.value);
        userinfo.foxBean = gethowmany.value;
        window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
      }

      howmany.value = ""; //清空输入框
      gethowmany.value = ""; //清空转换完成框
      show.value = false;

      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 600,
        onClose: () => {
          Toast.success("兑换操作成功");
        },
      });
    };

    return {
      back,
      sign,
      oksign,
      dates,
      allintegral,
      readbook,
      readtime,
      write,
      likebook,
      givegift,
      ceshi,
      signday,
      addint,
      show,
      changeshow,
      howmany,
      gethowmany,
      sure,
      change,
      gold,
      clickone,
      clicktwo,
      clickthree,
      clickfour,
      clickfive,
      SideLeftMeShow: computed(() => indexStore.SideLeftMeShow),
    };
  },
};
</script>


<template>
  <div class="sign">
    <div class="top">
      <!-- 标题 -->
      <div class="title">
        <!-- 左箭头 -->
        <div class="left" @click="back">
          <svg
            t="1669031595576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4977"
            width="200"
            height="200"
          >
            <path
              d="M274.510074 461.204104c130.168642-125.846196 260.332167-251.684206 390.490575-377.400442 53.595662-51.864228 133.49848 32.354895 79.653131 84.346013-115.838262 112.008027-231.6755 223.893256-347.450317 335.904353C513.596358 619.888196 629.989251 735.852324 746.444567 851.690586c52.978609 52.733015-26.921139 136.953162-79.712483 84.282568C535.946388 805.873074 405.233348 675.710572 274.510074 545.546024 252.90194 523.93789 252.342192 482.563574 274.510074 461.204104L274.510074 461.204104zM274.510074 461.204104"
              p-id="4978"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
        <div class="middle">签到任务</div>
        <div class="right">
          <div class="svg">
            <svg
              t="1669031805291"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5957"
              width="200"
              height="200"
            >
              <path
                d="M511.994 64C264.592 64 64 264.574 64 511.994 64 759.426 264.592 960 511.994 960 759.42 960 960 759.426 960 511.994 960 264.56 759.42 64 512.006 64h-0.012zM511 895.987c-212.07 0-384-171.942-384-384C127 299.903 298.93 128 510.987 128 723.071 128 895 299.916 895 512c0 212.07-171.93 384-384.013 384l0.013-0.013zM511.323 228c-25.166 0-45.568 20.402-45.568 45.568 0 0.574 0.01 1.148 0.033 1.722l11.332 299.804c0.695 18.39 15.806 32.942 34.21 32.942 18.405 0 33.516-14.551 34.21-32.942l11.321-299.804c0.95-25.15-18.668-46.308-43.818-47.258a45.57 45.57 0 0 0-1.72-0.032z m-0.734 440.016c-35.426 0-63.589 28.252-63.589 63.583 0 34.56 26.537 64.401 63.59 64.401 35.392 0 64.41-28.268 64.41-64.401C575 696.284 545.982 668 510.59 668v0.016z"
                p-id="5958"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
          <div class="wenzi">规则</div>
        </div>
      </div>
      <!-- 积分 -->
      <div class="integ">有狐币</div>
      <!-- 余额 -->
      <div class="balance">
        <div class="left">{{ allintegral }}</div>
        <div class="right" @click="changeshow">狐币兑换</div>
      </div>

      <!-- 连续签到 -->
      <div class="dontstop">
        <div class="shang">
          已连续签到 <span>{{ signday }}</span> 天

          <div class="banner">
            <div class="lunbo">
              <div
                class="item"
                v-for="(item, index) in dates.dayslists"
                :key="index"
              >
                <div class="box con" v-if="item.flag">
                  <svg
                    t="1669200643804"
                    class="icon"
                    viewBox="0 0 1879 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3644"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M801.590751 981.530636c-19.384971 0-38.030058-7.250867-52.087861-20.420809L348.337572 587.024277c-30.039306-27.96763-31.075145-74.43237-2.36763-103.731791s76.504046-30.187283 106.543353-2.219654L795.079769 800.554913 1416.434682 65.257803c26.487861-31.223121 73.988439-35.810405 106.099422-10.062427 32.110983 25.747977 36.698266 71.916763 10.358382 103.287861L859.893642 954.894798c-13.317919 15.833526-32.850867 25.452023-53.715607 26.635838h-4.587284z"
                      fill="#ffffff"
                      p-id="3645"
                    ></path>
                  </svg>
                </div>
                <div class="boxno" v-if="!item.flag" @click="addint(index)">
                  +200
                </div>
                <div class="wenzi">{{ item.days }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 任务列表 -->
      <div class="lists">
        <div class="item">
          <div class="left">
            <div class="svg no1">
              <img class="no1" src="../assets/signimg/book.png" alt="" />
            </div>
          </div>
          <div class="middle">
            <div class="biaoti">阅读一本书 ({{ dates.one }})</div>
            <div class="show">任意阅读一本书籍即可获得5积分：每日一次</div>
          </div>
          <div class="right" @click="clickone">
            <div
              :class="['duoshao', dates.one == '0/1' || readbook ? 'con' : '']"
            >
              20 狐币
            </div>
          </div>
        </div>

        <div class="item">
          <div class="left">
            <div class="svg no2">
              <img class="no2" src="../assets/signimg/eye.png" alt="" />
            </div>
          </div>
          <div class="middle">
            <div class="biaoti">阅读超过30秒（{{ dates.two }}）</div>
            <div class="show">
              当日累计阅读时长超过30分钟即可获得5积分，每日一次
            </div>
          </div>
          <div class="right" @click="clicktwo">
            <div
              :class="['duoshao', dates.two == '0/1' || readtime ? 'con' : '']"
            >
              20 狐币
            </div>
          </div>
        </div>

        <div class="item">
          <div class="left">
            <div class="svg no3">
              <img class="no3" src="../assets/signimg/talk.png" alt="" />
            </div>
          </div>
          <div class="middle">
            <div class="biaoti">发表评论（{{ dates.three }}）</div>
            <div class="show">对任意作品进行评论，即可获得5积分：每日一次</div>
          </div>
          <div class="right" @click="clickthree">
            <div
              :class="['duoshao', dates.three == '0/1' || write ? 'con' : '']"
            >
              20 狐币
            </div>
          </div>
        </div>

        <div class="item">
          <div class="left">
            <div class="svg no4">
              <img class="no4" src="../assets/signimg/star.png" alt="" />
            </div>
          </div>
          <div class="middle">
            <div class="biaoti">加入书架（{{ dates.four }}）</div>
            <div class="show">收藏任意作品，可获得5积分：每日一次。</div>
          </div>
          <div class="right" @click="clickfour">
            <div
              :class="['duoshao', dates.four == '0/1' || likebook ? 'con' : '']"
            >
              20 狐币
            </div>
          </div>
        </div>

        <div class="item last">
          <div class="left">
            <div class="svg no5">
              <img class="no5" src="../assets/signimg/flower.png" alt="" />
            </div>
          </div>
          <div class="middle">
            <div class="biaoti">打赏作品（{{ dates.five }}）</div>
            <div class="show">打赏任意作品即可获得10积分：每日一次。</div>
          </div>
          <div class="right" @click="clickfive">
            <div
              :class="['duoshao', dates.five == '0/1' || givegift ? 'con' : '']"
            >
              20 狐币
            </div>
          </div>
        </div>
      </div>

      <div class="null">
        <!-- 空白盒子防止任务队列沉底 -->
      </div>
    </div>
    <van-popup v-model:show="show" round position="bottom" class="radios">
      <p>请填写需要兑换的有狐币</p>
      <div class="box title">
        <div class="left">狐币</div>
        <div class="middle"><van-icon name="exchange" /></div>
        <div class="right">狐豆</div>
      </div>
      <div class="box">
        <input
          type="text"
          class="left"
          @input="change(howmany)"
          v-model="howmany"
        />
        <div class="middle">转换为</div>
        <div class="right">{{ gethowmany }}</div>
      </div>
      <div class="sure">
        <div class="sureinner" @click="sure">确认</div>
      </div>
    </van-popup>
  </div>
</template>




<style lang="scss">
.sign .radios {
  padding: 20px;
  box-sizing: border-box;
  // background-image: linear-gradient(to right top, #e8dcdc, #e17695);
  p {
    font-weight: bold;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 16px;
    color: #444;
  }
  .sure {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    .sureinner {
      width: 60px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border-radius: 6px;
      font-size: 14px;
      background-color: rgb(250 44 78 / 50%);
    }
  }
  .box {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    &.title {
      height: 30px;
      .left,
      .right {
        background: none;
        box-shadow: none;
        font-size: 16px;
        color: #333;
      }
      .middle {
        display: flex;
        align-items: center;
        height: 30px;
        justify-content: center;
        .van-icon {
          font-weight: bold;
          color: #e6114e;
          font-size: 20px;
        }
      }
    }
    .left {
      width: 100px;
      height: 30px;
      line-height: 30px;
      border: none;
      border-radius: 10px;
      padding: 0 10px;
      text-align: center;
      box-sizing: border-box;
      color: #7c7575;
      background-color: rgb(233 230 230 / 50%);
      box-shadow: 2px 2px 9px #cecdcd;
    }
    .middle {
      flex: 1;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 14px;
      color: #928e8e;
    }

    .right {
      color: #7c7575;
      width: 100px;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      border: none;
      border-radius: 10px;
      text-align: center;
      background-color: rgb(233 230 230 / 50%);
      box-shadow: 2px 2px 9px #cecdcd;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.sign {
  width: 100%;
  height: 100%;
  background-color: #f5f4f9;
  overflow: hidden;
  overflow-y: scroll;
}
.sign .top {
  width: 100%;
  height: 255px;
  // background-color: #fb91a0;
  background: url(../assets/img/signbcc.png) no-repeat;
  background-size: 100%;
  padding-top: 25px;
  box-sizing: border-box;
  position: relative;
  border-bottom-left-radius: 83% 35px;
  border-bottom-right-radius: 83% 35px;
  .null {
    width: 100%;
    height: 15px;
  }
  .lists {
    width: 90%;
    background-color: #fff;
    margin: 186px auto 0px;
    border-radius: 6px;
    overflow: hidden;

    .last {
      margin-bottom: 20px;
    }
    .item {
      margin-top: 23px;
      width: 100%;
      height: 54px;
      display: flex;
      .left {
        width: 66px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        .svg.no1 {
          width: 28px;
          height: 28px;
          margin-left: 0px;
          img {
            width: 88%;
          }
        }
        .svg.no2 {
          width: 30px;
          height: 30px;
          margin-left: -7px;
          img {
            width: 91%;
          }
        }
        .svg.no3 {
          width: 25px;
          height: 25px;
          margin-left: -6px;
          img {
            width: 95%;
          }
        }
        .svg.no4 {
          width: 26px;
          height: 26px;
          margin-left: -5px;
          img {
            width: 93%;
          }
        }
        .svg.no5 {
          width: 21px;
          height: 21px;
          margin-left: -4px;
          img {
            width: 90%;
          }
        }
      }
      .middle {
        flex: 1;
        height: 54px;
        background-color: #fff;
        .biaoti {
          width: 100%;
          height: 18px;
          font-size: 14px;
          line-height: 14px;
        }
        .show {
          font-size: 10px;
          color: #a6a5aa;
          width: 100%;
          height: 30px;
          margin-top: 4px;
        }
      }
      .right {
        width: 118px;
        height: 28px;
        display: flex;
        justify-content: center;
        .duoshao {
          width: 66px;
          height: 28px;
          border-radius: 14px;
          background-image: linear-gradient(to right top, #f6858a, #fc3c72);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          color: #fff;
          &.con {
            background-image: linear-gradient(to right top, #b8b2b2, #9f9295);
          }
        }
      }
    }
  }
  .dontstop {
    width: 90%;
    height: 150px;
    background-color: #fff;
    position: absolute;
    left: 5%;
    top: 160px;
    border-radius: 6px;
    .shang {
      height: 50px;
      line-height: 50px;
      // padding-left: 20px;
      text-indent: 20px;
      box-sizing: border-box;
      color: #1d1c37;
      font-size: 16px;
      span {
        color: #fe0f53;
      }
    }
    .banner {
      text-indent: 0;
      margin: 0 auto;
      box-sizing: border-box;
      width: 90%;
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar,
      &::-webkit-scrollbar-thumb {
        width: 0;
        height: 0;
      }
      .lunbo {
        display: flex;
        width: max-content;
        .item {
          width: 52px;
          height: 60px;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          position: relative;
          align-items: center;
          margin-right: 12px;
          position: relative;
          .wenzi {
            position: absolute;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            width: 52px;
            height: 14px;
            left: 0px;
            bottom: 0px;
          }
          .box {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-image: linear-gradient(to right top, #f28080, #e6114e);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
              width: 26px;
              height: 26px;
            }
          }
          .boxno {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(to right top, #f7f7f7, #e3e4ee);
            font-size: 10px;
            color: #bbb9d2;
          }
        }
      }
    }
  }
  .title {
    width: 100%;
    height: 20px;
    // background-color: red;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    .left {
      width: 16px;
      height: 16px;
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .middle {
      font-size: 18px;
      color: #fff;
      flex: 1;
      line-height: 20px;
      box-sizing: border-box;
      padding-left: 35%;
      font-weight: 700;
    }
    .right {
      display: flex;
      align-items: center;
      width: 58px;
      .svg {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        svg {
          width: 20px;
          height: 20px;
        }
      }
      .wenzi {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
  .integ {
    width: 100%;
    height: 16px;
    font-size: 14px;
    color: #fff;
    line-height: 16px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 23px;
    margin-bottom: 12px;
  }
  .balance {
    height: 36px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      color: #fff;
      font-size: 36px;
      font-weight: 600;
      line-height: 36px;
      width: 140px;
      height: 36px;
      text-align: center;
      letter-spacing: 3px;
    }
    .right {
      color: #f32b5c;
      width: 90px;
      height: 30px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 600;
      background-color: #fff;
      box-sizing: border-box;
      box-shadow: #fd6688 0 0 2px 1px;
      border: 2px solid #fd6688;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 44px;
    }
  }
}
</style>